<template>
  <div>
    <div class="play" @click="isCollapse=!isCollapse" :style="{ width:isCollapse?'64px':'180px' }">
      <el-icon v-if="isCollapse"><CaretRight /></el-icon>
      <el-icon v-else><CaretLeft /></el-icon>
    </div>
    <el-menu
      active-text-color="#ffd04b"
      background-color="#333744"
      class="el-menu-vertical-demo"
      default-active="1"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
      :collapse="isCollapse"
      :router="true"
    >
      <el-sub-menu index="1">
        <template #title>
          <el-icon><Avatar /></el-icon>
          <span>用户管理</span>
        </template>

        <el-menu-item index="1-1" :route="{path:'/userlist'}">
          <el-icon><Stamp /></el-icon>
          <span>用户列表</span>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><Grid /></el-icon>
          <span>权限管理</span>
        </template>
        <el-menu-item index="2-1" :route="{path:'jiaoselist'}">
          <el-icon><UserFilled /></el-icon>
          <span>角色列表</span>
        </el-menu-item>
        <el-menu-item index="2-2" :route="{path:'/quanxianlist'}">
          <el-icon><UserFilled /></el-icon>
          <span>权限列表</span>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><Present /></el-icon>
          <span>商品管理</span>
        </template>
        <el-menu-item index="3-1" :route="{path:'/goodslist'}">
          <el-icon><Present /></el-icon>
          商品列表
        </el-menu-item>
        <el-menu-item index="3-2" :route="{path:'/gooodsort'}">
          <el-icon><Present /></el-icon>
          <span>分类参数</span>
        </el-menu-item>
        <el-menu-item index="3-3" :route="{path:'/sortnum'}">
          <el-icon><Present /></el-icon>
          <span>商品分类</span>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="4">
        <template #title>
          <el-icon><Files /></el-icon>
          <span>订单管理</span>
        </template>
        <el-menu-item index="4-1" :route="{path:'/dingdanlist'}">
          <el-icon><Files /></el-icon>
          <span>订单列表</span>
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="5">
        <template #title>
          <el-icon><TrendCharts /></el-icon>
          <span>数据统计</span>
        </template>
        <el-menu-item index="5-1" :route="{path:'/numtable'}">
          <el-icon><TrendCharts /></el-icon>
          <span>数据报表</span>
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  Avatar,
  Grid,
  Present,
  Files,
  TrendCharts,
  Stamp,
  UserFilled,
  CaretRight,
  CaretLeft
} from "@element-plus/icons-vue";
const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="less" scoped>
.play{
  height: 30px;
  color: white;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>